<@override name="contest_content">
<table id="contest-statistics" class="table table-condensed table-bordered table-hover">
  <thead>
    <tr>
      <th width="5%">ID</th> 
      <#list resultName as name>
      <th id="${name}">${name}</th> 
      </#list>
      <th width="10%">Total</th> 
      <#list languageList as language>
      <th>${language.name}</th> 
      </#list>
    </tr>
  </thead>
  <tbody>
    <#list statistics as st>
    <tr>
      <td class="text-center"><a href="contest/problem/${cid}-${st.id!}">${st.id!}</a></td> 
      <#list resultName as name> 
      <#assign val=st["${name}"]>
      <td>${val}</td> 
      </#list>
      <td class="text-center"><a href="contest/status/${cid!}?pid=${st.id!}">${st.total!}</a></td> 
      <#list languageList as language> 
      <#assign val=st["${language.ext}"]>
      <td>${val}</td> 
      </#list>
    </tr>
    </#list>
  </tbody>
</table>

<div id="container" style="min-width: 750px; min-height: 550px; margin: 0 auto"></div>
</@override>

<@override name="scripts">
<script src="assets/Highcharts/js/highcharts.js"></script>
<script src="assets/Highcharts/js/modules/exporting.js"></script>

<link rel="stylesheet" href="assets/tablecloth/css/tablecloth.css" type="text/css">
<script src="assets/tablecloth/js/jquery.metadata.js"></script>
<script src="assets/tablecloth/js/jquery.tablesorter.min.js"></script>
<script src="assets/tablecloth/js/jquery.tablecloth.js"></script>

<script type="text/javascript">
  (function($){ // encapsulate jQuery
    $(function () {
      $('#container').highcharts({
          chart: {
            type: 'column'
          },
          title: {
            text: '<a href="contest/show/${cid}">Contest Statistics ${cid}</a> -- LinuxGroup'
          },
          xAxis: {
            categories: [<#list statistics as st>'${st.id}',</#list>]
          },
          yAxis: {
            min: 0,
            title: {
                text: 'Total Submit'
            }
          },
          legend: {
            backgroundColor: '#FFFFFF',
            reversed: true
          },
          plotOptions: {
            series: {
              stacking: 'normal'
            }
          },
          series: [
                    <#list resultName as name>
                    {
                      name: '${name}',
                      color: $('th#${name!}').css('color'),
                      stack: 'result',
                      data: [<#list statistics as st>${st["${name}"]}<#if st_index<statistics?size-1>,</#if></#list>]
                    },
                    </#list>
                    <#list languageList as language>
                    {
                      name: '${language.name}',
                      stack: 'language',
                      data: [<#list statistics as st>${st["${language.ext}"]}<#if st_index<statistics?size-1>,</#if></#list>]
                    }<#if language_index<languageList?size-1>,</#if>
                    </#list>
                  ]
      });
    });
  })(jQuery);
</script>

<script type="text/javascript">
  $(document).ready(function() {
    <#if oj_style != "slate">
    $("#contest-statistics").tablecloth({
      theme:"stats",
      sortable:true,
      condensed:true,
      striped:true,
      clean:true
    });
    </#if>
  });
</script>
</@override>
<@extends name="_layout.html" />
